<template>
    <!-- 付款记录&操作记录弹窗 -->
    <view
        class="item-info"
        :class="showBillInfo === 0 ? 'none' : showBillInfo === 1 ? 'show' : ''"
    >
        <view class="cate-content">
            <view class="item-fixed-top">
                <view class="title">
                    <view
                        :class="activeType == 0 ? 'active' : ''"
                        @click="onTitle(0)"
                        v-show="!obj.del"
                        >付款记录</view
                    >
                    <view
                        :class="activeType == 1 ? 'active' : ''"
                        @click="onTitle(1)"
                        >操作记录</view
                    >
                    <view
                        :class="activeType == 2 ? 'active' : ''"
                        @click="onTitle(2)"
                        >退款记录</view
                    >
                </view>
                <view class="close" @click="close">
                    <image
                        src="../../static/images/close.png"
                        mode="scaleToFill"
                    ></image>
                </view>
            </view>
            <view class="comm-list cate-list" id="operateBox">
                <view v-if="activeType == 0">
                    <view
                        class="item"
                        v-for="(item, index) in data"
                        :key="index"
                    >
                        <view class="item-a">{{ item.time }}</view>
                        <view class="item-b">
                            <view v-if="item.scode_txt"
                                >{{ item.scode_txt }}
                                {{
                                    item.uname_cp
                                        ? "-(" + item.uname_cp + ")"
                                        : ""
                                }}</view
                            >
                            <view v-if="item.paytitle">{{
                                item.paytitle
                            }}</view>
                            <view v-if="item.money">{{ item.money }}</view>
                            <view v-if="item.txt">备注 : {{ item.txt }}</view>
                        </view>
                    </view>
                </view>
                <view v-else-if="activeType == 1">
                    <view
                        class="item"
                        v-for="(item, index) in data"
                        :key="index"
                    >
                        <view class="item-a">{{ item.atime_txt }}</view>
                        <view class="item-b">
                            <view v-if="item.act_txt"
                                >{{ item.act_txt }}
                                {{
                                    item.uname ? "-(" + item.uname + ")" : ""
                                }}</view
                            >
                            <view v-if="item.txt">{{ item.txt }}</view>
                        </view>
                    </view>
                </view>
                <view v-else>
                    <view
                        class="item"
                        v-for="(item, index) in data"
                        :key="index"
                    >
                        <view class="item-a">{{ item.atime_txt }}</view>
                        <view class="item-b">
                            <view class="b-ei">
                                <view v-if="item.ch_txt"
                                    >{{ item.ch_txt }}
                                </view>
                                <view v-if="item.status_txt">{{
                                    item.status_txt
                                }}</view></view
                            >

                            <view v-if="item.txt">备注：{{ item.txt }}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
let pageNo = 0;
import staticConst from "../../js/const/StaticConst.js";
import util from "../../js/util/Util.js";
import config from "../../js/conf/Config.js";
export default {
    props: ["md"],

    data() {
        return {
            goodsImg: staticConst.GOOD_IMG,
            showBillInfo: 0,
            activeType: 0,
            data: [],
            obj: {},
        };
    },
    watch: {},
    methods: {
        onTitle(type) {
            if (type == this.activeType) return;
            this.activeType = type;
            pageNo = 0;
            this.data = [];
            this.orderOprAndPay();
        },

        /*** 重置数据 ***/
        ResetData() {
            pageNo = 0;
            this.data = [];
        },

        async orderOprAndPay(data) {
            if (data) {
                this.obj = data;
                this.activeType = data.activeType;
            }
            let url = config.ORDER_ALOG_LS;
            if (this.activeType == 0) {
                url = config.ORDER_BILL;
            } else if (this.activeType == 2) {
                url = config.ORDER_RETURN_LOG;
            }

            let param = {};
            let md = this.md == 4 ? staticConst.ORDER_XS : staticConst.ORDER_CG;
            console.log("this.md=======:", this.md);
            param.md = md;
            param.type = this.obj.type; //this.orderInfos.type;
            param.odid = this.obj.odid; //this.orderInfos.id;
            param.pnum = staticConst.PAGE_SIZE;
            param.pfrom = pageNo * staticConst.PAGE_SIZE;
            let res = await this.$api({ url: url, data: param });
            if (!res) return;
            if (res.status == 1) {
                if (this.activeType == 2) {
                    if (!res.data.ls) {
                        this.$msg({
                            title: "暂无更多退货记录",
                        });
                        return;
                    }
                } else {
                    if (!res.data) {
                        this.$msg({
                            title:
                                this.activeType == 1
                                    ? "暂无更多操作记录"
                                    : "暂无更多付款记录",
                        });
                        return;
                    }
                }
                if (this.activeType == 2) {
                    this.data = this.data.concat(res.data.ls);
                } else {
                    this.data = this.data.concat(res.data);
                }
                if (this.showBillInfo != 1) this.toggleBillsStateMask("show");
                pageNo++;
            }
        },

        /**显示分类面板 type:0付款记录，1：操作记录，2：退款记录**/
        toggleBillsStateMask(type) {
            let timer = type === "show" ? 10 : 200;
            let state = type === "show" ? 1 : 0;
            this.showBillInfo = 2;
            setTimeout(() => {
                this.showBillInfo = state;
            }, timer);
            if (!type) {
                this.ResetData();
            }
        },

        close() {
            pageNo = 0;
            this.toggleBillsStateMask();
        },

        handlerScroll() {
            let self = this;
            this.$nextTick(() => {
                var flag = util.scrollData("#operateBox");
                if (flag) {
                    // 加载数据
                    this.orderOprAndPay();
                }
            });
        },
    },
    mounted() {
        // window.addEventListener("scroll",this.handlerScroll,true);
        document
            .querySelector("#operateBox")
            .addEventListener("scroll", this.handlerScroll, true);
    },
    destroyed() {
        // window.removeEventListener("scroll",this.handlerScroll);
        document
            .querySelector("#operateBox")
            .removeEventListener("scroll", this.handlerScroll);
    },
};
</script>
<style lang="scss">
.item-info {
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0);
    transition: 0.3s;
    overflow-y: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    .cate-content {
        border-radius: 6px;
        overflow: hidden;
        width: 60%;
        background: #f8f8f8;
        float: right;
        transform: translateY(-100%);
        transition: 0.3s;
        .title {
            display: flex;
            cursor: pointer;
            view {
                margin-left: 20px;
                &:first-child {
                    margin-left: 0;
                }
            }
            .active {
                color: #3388ff;
                transform: scale(1.3);
            }
        }
        .item-fixed-top {
            padding: 10px 0 10px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #fff;
            font-size: 14px;
            .close {
                width: 32px;
                height: 32px;
                text-align: center;
                cursor: pointer;
                image {
                    width: 14px;
                    height: 14px;
                }
            }
        }
    }

    &.none {
        display: none;
    }
    &.show {
        background: rgba(0, 0, 0, 0.3);
        .cate-content {
            transform: translateY(0);
        }
    }
}
.cate-list {
    height: 360px;
    .item {
        .item-a {
            padding: 4px 10px;
        }
        .item-b {
            padding: 10px;
            background: #fff;
            .b-ei {
                display: flex;
                justify-content: space-between;
            }
        }
    }
}
</style>